<template>
  <chart :options="options" />
</template>

<script>
export default {
  name: 'echartsLine',
  props: {
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    dimensions: {
      type: Array,
      default: () => {
        return null
      }
    },
    units: {
      type: Array,
      default: () => {
        return null
      }
    },
    colors: {
      type: Array,
      default: () => {
        return null
      }
    },
    type: {
      type: Array,
      default: () => {
        return []
      }
    },
    legend: {
      type: Array,
      default: () => {
        return null
      }
    },
    symbolSize: {
      type: Number,
      default: 3
    },
    smooth: {
      type: Boolean,
      default: () => {
        return null
      }
    },
    boundaryGap: {
      type: Boolean,
      default: () => {
        return null
      }
    },
    left: {
      type: String,
      default: () => {
        return '5%'
      }
    },
    top: {
      type: String,
      default: () => {
        return '13%'
      }
    },
    right: {
      type: String,
      default: () => {
        return '5%'
      }
    },
    bottom: {
      type: String,
      default: () => {
        return '10%'
      }
    },
    position: {
      type: Array,
      default: () => {
        return []
      }
    },
    legendleft: {
      type: String,
      default: () => {
        return 'right'
      }
    },
    padding: {
      type: Array,
      default: () => {
        return []
      }
    },
    paddingone: {
      type: Array,
      default: () => {
        return [0, 40, 3, 0]
      }
    },
    barBorderRadius: {
      type: Array,
      default: () => {
        return null
      }
    },
    barGap: {
      type: String,
      default: () => {
        return null
      }
    },
    barWidth: {
      type: Number,
      default: () => {
        return null
      }
    },
    num: {
      type: Number,
      default: () => {
        return null
      }
    },
    tooltipshow: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  computed: {
    options () {
      const _this = this
      const series = []
      const yAxis = []
      for (let i = 0; i < this.legend.length; i++) {
        if (this.position.length != 0) {
          series.push({
            type: this.type[i],
            name: this.legend[i],
            yAxisIndex: i,
            areaStyle: {},
            symbol: 'circle',
            symbolSize: this.symbolSize,
            barWidth: this.barWidth,
            smooth: this.smooth,
            barGap: this.barGap,
            itemStyle: {
              barBorderRadius: this.barBorderRadius
              // borderColor: '#fff',
              // borderWidth: 1
            }
          })
        } else {
          series.push({
            type: this.type[i],
            name: this.legend[i],
            areaStyle: {},
            symbol: 'circle',
            barGap: this.barGap,
            symbolSize: this.symbolSize,
            smooth: this.smooth,
            barWidth: this.barWidth,
            itemStyle: {
              barBorderRadius: this.barBorderRadius
              // borderColor: '#fff',
              // borderWidth: 1
            }
          })
        }
      }
      for (let i = 0; i < this.units.length; i++) {
        if (this.position.length != 0) {
          yAxis.push({
            name: this.units[i],
            nameLocation: 'end',
            nameGap: 6,
            position: this.position[i],
            scale: true,
            axisLabel: {
              interval: 0,
              color: '#ccc',
              fontSize: 18
            },
            nameTextStyle: {
              fontSize: 18,
              color: '#ccc',
              algin: 'left',
              padding: this.padding[i]
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#315070'],
                width: 1,
                type: 'dashed'
              }
            },
            show: true,
            type: 'value'
          })
        } else {
          yAxis.push({
            name: this.units[i],
            nameLocation: 'end',
            nameGap: 6,
            scale: true,
            axisLabel: {
              interval: 0,
              color: '#ccc',
              fontSize: 16
            },
            nameTextStyle: {
              fontSize: 16,
              color: '#ccc',
              algin: 'left',
              padding: this.paddingone
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#315070'],
                width: 1,
                type: 'dashed'
              }
            },
            show: true,
            type: 'value'
          })
        }
      }
      return {
        color: this.colors,
        title: {
          text: this.title
        },
        grid: {
          containLabel: true,
          left: this.left,
          top: this.top,
          right: this.right,
          bottom: this.bottom
        },
        tooltip: {
          show: this.tooltipshow,
          trigger: 'axis',
          textStyle: {
            color: 'rgba(304, 304, 304, 0.9)',
            fontSize: 16
          },
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          show: true,
          left: this.legendleft,
          top: 'top',
          icon: 'circle',
          textStyle: {
            color: 'rgba(171, 191, 213, 1)',
            fontSize: 16
          },
          selectedMode: false,
          itemWidth: 13,
          itemHeight: 7,
          data: this.legend
        },
        dataset: {
          dimensions: this.dimensions,
          source: this.data
        },
        xAxis: {
          type: 'category', // 类目轴
          boundaryGap: this.boundaryGap,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#255a8a'
            }
          },
          axisLabel: {
            interval: 0,
            color: '#ccc',
            fontSize: 16,
            formatter: function (value) {
              var ret = ''
              var maxLength = 2
              var valLength = value.length
              var rowN = Math.ceil(valLength / maxLength)
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = ''
                  var start = i * maxLength
                  var end = start + maxLength
                  temp = value.substring(start, end) + '\n'
                  ret += temp
                }
                return ret
              } else {
                return value
              }
            }
          }
          // splitLine:{
          //   show: true,
          // }
        },
        yAxis: yAxis,
        series: series
      }
    }
  }
}
</script>

<style scoped>
.echartsLine {
}
</style>
